<template>
    <div class="order-page" id="order-page" v-loading="loadingPage">
        <div class="table-header-wrap flex-center">
            <ol class="table-header">
                <li class="flex2 li1">商品信息</li>
                <li class="flex1">实付金额</li>
                <li class="flex1 margin">交易状态</li>
                <li class="flex1">操作</li>
            </ol>
        </div>
        <div class="order-main" v-if="showPage">
            <div class="order-wrap" v-if="list.length > 0">
                <div class="order-item" v-for="(item,index) in list" :key="index">
                    <div class="order-item-header flex">
                        <span>订单号：{{ item.order_no }}</span>
                        <span>订单时间：{{ item.create_time }}</span>
                        <span>共计{{item.order_total_num}}件商品</span>
                    </div>
                    <div class="order-bootom-wrap flex">
                        <div class="goods-info flex2">
                            <div :class="[item.isFlag ? 'goods-con-h':'goods-con']">
                                <div class="order-goods-item flex border" v-for="(goodsItem, goodsIndex) in item.orderGoods" :key="goodsIndex"
                                     @click="toGoodsDetail(goodsItem.goods_id)">
                                    <div class="goods-img flex-center">
                                        <base-img :src="goodsItem.goods_image"></base-img>
                                    </div>
                                    <div class="goods-name">
                                        <p>
                                            {{ goodsItem.goods_name }}
                                        </p>
                                    </div>

                                    <div class="goods-price padTop text-center flex1">
                                        <p>￥{{ goodsItem.goods_price }}<i v-if="goodsItem.goods_unit">/{{goodsItem.goods_unit}}</i></p>
                                    </div>
                                    <div class="goods-price padTop text-center flex1">
                                        <p>x{{ goodsItem.total_num }}</p>
                                    </div>
                                </div>
                            </div>
                            <template v-if="item.orderGoods.length > 3">
                                <div class="more-text-wrap flex-center" @click="watchMoreGoods(index)" v-if="!item.isFlag">
                                    还有{{item.orderGoods.length - 3}}种商品<i class="el-icon-arrow-down"></i></div>
                            </template>
                        </div>
                        <div class="goods-sure-price right-base flex1 flex-center border">
                            <p>￥<span>{{ item.total_price }}</span></p>
                        </div>
                        <div class="status daishenhe margin right-base flex1 text-center flex-center" v-if='item.order_status == -1'>
                            已取消
                        </div>
                        <div class="status daipeisong margin right-base flex1 text-center flex-center" v-if='item.order_status == 0'>
                            待审核
                        </div>
                        <div class="status daipeisong margin right-base flex1 text-center flex-center" v-if='item.order_status == 1'>
                            待配送
                        </div>
                        <div class="status peisongzhong margin right-base flex1 text-center flex-center" v-if='item.order_status == 2'>
                            审核不通过
                        </div>
                        <div class="status peisongzhong margin right-base flex1 text-center flex-center" v-if='item.order_status == 3'>
                            配送中
                        </div>
                        <div class="status yiwancheng margin right-base flex1 text-center flex-center" v-if='item.order_status == 4'>
                            已完成
                        </div>
                        <div class="handle right-base flex1 text-center flex-center">
                            <div class="btn-wrap">
                                <el-button class="btn detail flex-center" @click='toOrderDetail(item.order_id)'>查看详情</el-button>
                                <el-button class="btn cancel flex-center" v-if='item.order_status == 0'
                                           @click='cancelOrderModal(item.order_id)'>取消订单</el-button>
                                <el-button class="btn cancel flex-center" v-if='item.order_status == 4' @click='againOrder(item.order_id)'>再来一单</el-button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div v-else class="no-data-wrap">
                <no-data :noDataImg="noDataImg"></no-data>
            </div>
        </div>
        <pagination-footer :total="total" :page.sync="page" :limit.sync="limits" @pagination="getList"></pagination-footer>
    </div>
</template>

<script>
import PaginationFooter from '@/components/PaginationFooter.vue';
import {
    orderList,
    orderCancel,
    againOrder
} from '../../api/order'
import BaseImg from '@/components/BaseImg.vue';
import NoData from '@/components/NoData.vue';
export default {
    components: {
        PaginationFooter,
        BaseImg,
        NoData,
    },
    props: {
        tabType: {
            type: String,
            default: 'all',
        },
    },
    watch: {
        tabType(newVal, oldVal) {
            let that = this;
            that.initTabType = newVal;
            that.loadingPage = true;
            that.showPage = false;
            that.page = 1;
            that.list = [];
            that.getList();
        }
    },
    data() {
        return {
            list: [],
            page: 1,
            limits: 10,
            total: 0,
            initTabType: '',
            showPage: false,
            loadingPage: true,
            noDataImg: require('../../assets/img/no-order.png')
        };
    },
    created() {
        this.getTabType();
        this.getList();
    },
    methods: {
        getTabType() {
            this.initTabType = this.$route.params.type ? this.$route.params.type : 'all';
            this.$emit('getTabType', this.initTabType)
        },
        getList() {
            const that = this;
            orderList({
                page: that.page,
                limits: that.limits,
                type: that.initTabType
            }).then(res => {
                that.loadingPage = false;
                that.showPage = true;
                if (res.code == 0) {
                    res.data.data.forEach(v => {
                        v.isFlag = false;
                    })
                    that.list = res.data.data;
                    that.total = res.data.total;
                    console.log('that.list', that.list)
                }
            })
        },
        watchMoreGoods(index) {
            let list = this.list;
            list[index].isFlag = !list[index].isFlag;
            this.list = list;
        },
        cancelOrderModal(id) {
            const that = this;
            that.$confirm(`确认要取消此订单吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '我再想想',
                type: 'warning'
            }).then(() => {
                that.cancelOrder(id)
            }).catch();
        },
        cancelOrder(id) {
            const that = this;
            let list = that.list;
            orderCancel({
                order_id: id
            }).then(res => {
                if (res.code == 0) {
                    that.$message.success(res.msg)
                    if (that.initTabType == 'audit') {
                        that.initTabType = 'all';
                        that.$emit('getTabType', that.initTabType);
                        that.page = 1;
                        that.list = [];
                        that.getList()
                    } else {
                        that.getList()
                    }
                }
            })
        },
        againOrder(id) {
            const that = this;
            againOrder({
                order_id:id,
            }).then(res => {
                if (res.code == 0) {
                    that.$message.success(res.msg)
                    that.$router.push('/cart')
                }
            })
        },
        toOrderDetail(id) {
            this.$router.push(`/order/order_detail/${id}`)
        },
        toGoodsDetail(id) {
            const href = this.$router.resolve({
                path: `/goods_detail`,
                query: { goods_id: id },
            }).href;
            window.open(href, "_blank");
        },
    },
};
</script>
<style lang="scss" scoped>
$supplier-color: #30b30e;
.flex2 {
    flex: 4;
}

.flex4 {
    flex: 5;
}

.flex1 {
    flex: 1;
}

.order-page {
    width: 100%;
    padding-bottom: 120px;
}

.table-header-wrap {
    width: 100%;
    height: 60px;
}

.table-header {
    width: 1050px;
    height: 38px;
    background: #ffffff;
    border-radius: 4px;
    // position: fixed;
    display: flex;
    align-items: center;
    padding: 0 12px;
    box-sizing: border-box;

    .li1 {
        text-align: left;
    }

    li {
        font-size: 16px;
        font-weight: 600;
        text-align: center;
    }
}

.order-wrap {
    width: 100%;
}

.border {
    border-bottom: 1px solid #f7f9fa;
}

.padTop {
    padding-top: 30px;
}
.margin {
    margin: 0 10px;
}
.order-item {
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 12px;
    .order-item-header {
        padding: 0 12px;
        height: 44px;
        align-items: center;
        background: #f8f9fd;
        border-radius: 4px;
        font-size: 14px;
        font-weight: bold;

        span {
            &:nth-of-type(2) {
                padding: 0 20px 0 50px;
            }
        }
    }

    .order-bootom-wrap {
    }

    .goods-info {
        .order-goods-item {
            height: 88px;
            align-items: center;
            box-sizing: border-box;
        }

        .goods-img {
            width: 64px;
            height: 64px;
            margin-right: 20px;
            border-radius: 6px;
            overflow: hidden;
        }
        .goods-name {
            height: 100%;
            p {
                width: 196px;
                height: 40px;
                line-height: 20px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-top: 12px;
            }
        }
    }

    .goods-price {
        color: #9c9c9c;
        height: 100%;
    }

    .goods-sure-price {
        color: #ff6a01;
        font-size: 12px;
        span {
            font-size: 20px;
            font-family: "DIN-BOLD";
        }
    }

    .right-base {
        width: 100%;
        // height: 100%;
        background-color: #f7f9fa;
        // border-radius: 4px;
    }

    .status {
        // margin-right:10px;
        color: #8f8f8f;
    }
    .daishenhe {
        color: var(--main-color);
    }
    .daipeisong {
        color: #4facf8;
    }
    .yiwancheng {
        color: #ff5040;
    }
    .peisongzhong {
        color: #f1660a;
    }

    .handle {
    }

    .btn-wrap {
        width: 100%;
        padding: 0 14px;
        box-sizing: border-box;
        ::v-deep .el-button + .el-button {
            margin-left: 0;
        }
        .btn {
            width: 100%;
            height: 36px;
            border-radius: 19px;
            padding: 0 20px;
        }
        .cancel {
            background: #30b30e;
            border: none;
            color: #fff;
            margin-top: 6px;
        }
    }
}

.goods-con {
    max-height: 264px;
    overflow: hidden;
    transition: height 0.2s ease;
}
.goods-con-h {
    max-height: auto;
    overflow: inherit;
}

.more-text-wrap {
    // background: red;
    height: 40px;
    color: #afb0b2;
    i {
        margin-left: 8px;
    }
}

.footer {
    width: 100%;
    height: 103px;
    background: #ffffff;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 222;

    .footer-con {
        width: 1180px;
        height: 103px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin: auto;
    }
}
.no-data-wrap {
    margin-top: 50px;
}
@media screen and (max-width: 1280px) {
    .table-header {
        width: 782px;
    }
}
</style>